<template>
  <div class="MonetaryAnalysis">
    <el-card>
      <div class="ChartBox">
        <div>
          <div class="searchBox">
            <h3>宝石获取</h3>
            <el-date-picker
              v-model="getGemstoneTimeVal"
              type="daterange"
              :picker-options="pickerOptionsA"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              value-format="yyyy-MM-dd"
              @change="focusA"
            >
            </el-date-picker>
            <el-button class="btn" icon="el-icon-search" @click="getGemstoneBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcel"
              >导出Excel</el-button
            >
          </div>
          <span>{{ date }}</span>
          <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>
        </div>

        <div>
          <div class="searchBox">
            <h3>宝石消耗</h3>
            <el-date-picker
              v-model="consumeGemstoneTimeVal"
              type="daterange"
              :picker-options="pickerOptionsB"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              value-format="yyyy-MM-dd"
              @change="focusB"
            >
            </el-date-picker>
            <el-button
              class="btn"
              icon="el-icon-search"
              @click="consumeGemstoneBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
              >导出Excel</el-button
            >
          </div>
          <span>{{ dateB }}</span>
          <div id="myChartB" :style="{ width: '100%', height: '500px' }"></div>
        </div>
      </div>

      <div class="ChartBox">
        <div>
          <div class="searchBox">
            <h3>金币获取</h3>
            <el-date-picker
              v-model="getCoinTimeVal"
              type="daterange"
              :picker-options="pickerOptionsC"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              value-format="yyyy-MM-dd"
              @change="focusC"
            >
            </el-date-picker>
            <el-button class="btn" icon="el-icon-search" @click="getCoinBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelC"
              >导出Excel</el-button
            >
          </div>
          <span>{{ dateC }}</span>
          <div id="myChartC" :style="{ width: '100%', height: '500px' }"></div>
        </div>

        <div>
          <div class="searchBox">
            <h3>金币消耗</h3>
            <el-date-picker
              v-model="consumeCoinTimeVal"
              type="daterange"
              :picker-options="pickerOptionsD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              value-format="yyyy-MM-dd"
              @change="focusD"
            >
            </el-date-picker>
            <el-button class="btn" icon="el-icon-search" @click="consumeCoinBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelD"
              >导出Excel</el-button
            >
          </div>
          <span>{{ dateD }}</span>
          <div id="myChartD" :style="{ width: '100%', height: '500px' }"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { chartGoldCoinLine } from "@/api/DataManagement";

export default {
  data() {
    return {
      //宝石获取
      pickerOptionsA: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      getGemstoneTimeValStartDate: "", //宝石获取
      getGemstoneTimeValEndDate: "", //宝石获取
      getGemstoneTimeVal: "", //宝石获取
      //宝石消耗
      pickerOptionsB: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      consumeGemstoneTimeValStartDate: "", //宝石消耗日期
      consumeGemstoneTimeValEndDate: "", //宝石消耗日期
      consumeGemstoneTimeVal: "", //宝石消耗日期
      //金币获取
      pickerOptionsC: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      getCoinTimeValStartDate: "", //
      getCoinTimeValEndDate: "", //
      getCoinTimeVal: "", //金币获取日期
      //金币消耗
      pickerOptionsD: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      consumeCoinTimeValStartDate: "", //
      consumeCoinTimeValEndDate: "", //
      consumeCoinTimeVal: "", //金币消耗日期

      date: "",
      dateB: "",
      dateC: "",
      dateD: "",
    };
  },
  methods: {
    // 导出宝石获取
    exportExcel() {
      chartGoldCoinLine({
        startTime: this.getGemstoneTimeValStartDate,
        endTime: this.getGemstoneTimeValEndDate,
        type: 1, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.gemstoneNum.length; i++) {
              var arr = {};
              arr = {
                label: res.data.label[i],
                gemstoneNum: res.data.gemstoneNum[i],
                peopleNum: res.data.peopleNum[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["名称", "宝石数", "人数"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["label", "gemstoneNum", "peopleNum"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "宝石获取"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出宝石消耗
    exportExcelB() {
      chartGoldCoinLine({
        startTime: this.consumeGemstoneTimeValStartDate,
        endTime: this.consumeGemstoneTimeValEndDate,
        type: 2, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.gemstoneNum.length; i++) {
              var arr = {};
              arr = {
                label: res.data.label[i],
                gemstoneNum: res.data.gemstoneNum[i],
                peopleNum: res.data.peopleNum[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["名称", "宝石数", "人数"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["label", "gemstoneNum", "peopleNum"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "宝石消耗"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出金币获取
    exportExcelC() {
      chartGoldCoinLine({
        startTime: this.getCoinTimeValStartDate,
        endTime: this.getCoinTimeValEndDate,
        type: 3, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.gemstoneNum.length; i++) {
              var arr = {};
              arr = {
                label: res.data.label[i],
                gemstoneNum: res.data.gemstoneNum[i],
                peopleNum: res.data.peopleNum[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["名称", "金币获取途径", "人数"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["label", "gemstoneNum", "peopleNum"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "金币获取"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出金币消耗
    exportExcelD() {
      chartGoldCoinLine({
        startTime: this.consumeCoinTimeValStartDate,
        endTime: this.consumeCoinTimeValEndDate,
        type: 4, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.gemstoneNum.length; i++) {
              var arr = {};
              arr = {
                label: res.data.label[i],
                gemstoneNum: res.data.gemstoneNum[i],
                peopleNum: res.data.peopleNum[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["名称", "金币数", "人数"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["label", "gemstoneNum", "peopleNum"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "金币消耗"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //宝石获取
    getGemstone() {
      chartGoldCoinLine({
        startTime: "",
        endTime: "",
        type: 1, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.date = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["宝石数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              // {
              //   type: "value",
              // },
              {
                type: "value",
                name: "宝石数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "宝石数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                yAxisIndex: 1,
                data: res.data.peopleNum,
              },
            ],
          });
        }
      });
    },
    //搜索
    getGemstoneBtn() {
      chartGoldCoinLine({
        startTime: this.getGemstoneTimeValStartDate,
        endTime: this.getGemstoneTimeValEndDate,
        type: 1, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.date = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["宝石数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              // {
              //   type: "value",
              // },
              {
                type: "value",
                name: "宝石数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "宝石数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    focusA(time) {
      if (!this.getGemstoneTimeVal) {
        this.getGemstoneTimeVal = [];
      }
      this.getGemstoneTimeValStartDate = this.getGemstoneTimeVal[0];
      this.getGemstoneTimeValEndDate = this.getGemstoneTimeVal[1];
    },
    //宝石消耗
    consumeGemstone() {
      chartGoldCoinLine({
        startTime: "",
        endTime: "",
        type: 2, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateB = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["宝石数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "宝石数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "宝石数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    //搜索
    consumeGemstoneBtn() {
      chartGoldCoinLine({
        startTime: this.consumeGemstoneTimeValStartDate,
        endTime: this.consumeGemstoneTimeValEndDate,
        type: 2, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateB = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["宝石数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "宝石数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "宝石数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    focusB(time) {
      if (!this.consumeGemstoneTimeVal) {
        this.consumeGemstoneTimeVal = [];
      }
      this.consumeGemstoneTimeValStartDate = this.consumeGemstoneTimeVal[0];
      this.consumeGemstoneTimeValEndDate = this.consumeGemstoneTimeVal[1];
    },
    //金币获取
    getCoin() {
      chartGoldCoinLine({
        startTime: "",
        endTime: "",
        type: 3, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateC = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartC = this.$echarts.init(
            document.getElementById("myChartC")
          );
          // 绘制图表
          myChartC.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["金币数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "金币数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金币数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    //搜索
    getCoinBtn() {
      chartGoldCoinLine({
        startTime: this.getCoinTimeValStartDate,
        endTime: this.getCoinTimeValEndDate,
        type: 3, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateC = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartC = this.$echarts.init(
            document.getElementById("myChartC")
          );
          // 绘制图表
          myChartC.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["金币数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "金币数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金币数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    focusC(time) {
      if (!this.getCoinTimeVal) {
        this.getCoinTimeVal = [];
      }
      this.getCoinTimeValStartDate = this.getCoinTimeVal[0];
      this.getCoinTimeValEndDate = this.getCoinTimeVal[1];
    },
    //金币消耗
    consumeCoin() {
      chartGoldCoinLine({
        startTime: this.consumeCoinTimeValStartDate,
        endTime: this.consumeCoinTimeValEndDate,
        type: 4, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateD = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          // 绘制图表
          myChartD.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["金币数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "金币数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金币数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    consumeCoinBtn() {
      chartGoldCoinLine({
        startTime: this.consumeCoinTimeValStartDate,
        endTime: this.consumeCoinTimeValEndDate,
        type: 4, //1. 宝石获取2. 宝石消耗3. 金币获取4.金币消耗
      }).then((res) => {
        if (res.code == 0) {
          this.dateD = res.data.date;
          // 基于准备好的dom，初始化echarts实例
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          // 绘制图表
          myChartD.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["金币数", "人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "金币数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 60,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金币数",
                type: "bar",
                data: res.data.gemstoneNum,
              },
              {
                name: "人数",
                type: "bar",
                data: res.data.peopleNum,
                yAxisIndex: 1,
              },
            ],
          });
        }
      });
    },
    focusC(time) {
      if (!this.getCoinTimeVal) {
        this.getCoinTimeVal = [];
      }
      this.getCoinTimeValStartDate = this.getCoinTimeVal[0];
      this.getCoinTimeValEndDate = this.getCoinTimeVal[1];
    },
    focusD(time) {
      if (!this.consumeCoinTimeVal) {
        this.consumeCoinTimeVal = [];
      }
      this.consumeCoinTimeValStartDate = this.consumeCoinTimeVal[0];
      this.consumeCoinTimeValEndDate = this.consumeCoinTimeVal[1];
    },
  },
  created() {
    this.getGemstone();
    this.consumeGemstone();
    this.getCoin();
    this.consumeCoin();
  },
};
</script>

<style lang="less" scoped>
.MonetaryAnalysis {
  margin: 30px;
  height: 100%;
  .ChartBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 60px 0px;
    div {
      width: 96%;
      .searchBox {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        h3 {
          line-height: 4px;
          width: 160px;
        }
        .btn {
          height: 40px;
        }
        .el-input__inner,
        .el-range-editor.el-input__inner,
        .el-date-editor .el-range-input {
          width: 300px;
        }
      }
      #myChartA {
        margin-top: 40px;
      }
      #myChartB {
        margin-top: 40px;
      }
      #myChartC {
        margin-top: 40px;
      }
      #myChartD {
        margin-top: 40px;
      }
    }
  }
}
</style>